<!--
  Generated template for the CheckList page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar color="secondary">
    <ion-title>{{checklist.title}}</ion-title>
    <ion-buttons end>
      <button ion-button icon-only (click)="uncheckItems()">
        <ion-icon name="refresh-circle"></ion-icon>
      </button>
      <button ion-button icon-only (click)="addItem()">
        <ion-icon name="add-circle"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>

</ion-header>


<ion-content>
  <ion-list no-lines>
    <ion-item-sliding *ngFor="let item of checklist.items">
      <ion-item>
        <ion-label>{{  item.title }}</ion-label>
        <ion-checkbox [checked]="item.checked" (click)="toggleItem(item)">
        </ion-checkbox>
      </ion-item>
      <ion-item-options>
        <button ion-button icon-only color="light" (click)="renameItem(item)">
          <ion-icon name="clipboard"></ion-icon> Edit
        </button>
        <button ion-button icon-only color="danger" (click)="removeItem(item)">
          <ion-icon name="trash"></ion-icon> Delete
        </button>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>
</ion-content>
